<script setup>
import {reactive, ref, watch, defineEmits} from "vue";
import {TdtMap} from "vue-tianditu";
import {Search} from '@element-plus/icons-vue'

const state = reactive({
  center: [118.328100, 32.257800],
  zoom: 11
});

const props = defineProps(['initlng', 'initlat']);


const emit = defineEmits(['lnglatChange']);

const lng = ref();
const lat = ref();


const marker = ref();

const map = ref();

const search = ref('');

const handleLngLatChange = (lng, lat) => {
  if (!marker.value) {
    marker.value = new T.Marker(new T.LngLat(lng, lat));
    map.value.addOverLay(marker.value);
  } else {
    marker.value.setLngLat(new T.LngLat(lng, lat));
  }
  map.value.panTo(new T.LngLat(lng, lat));
  emit('lnglatChange', {lng, lat});
}

if (props.initlng && props.initlat) {
  lng.value = parseFloat(props.initlng);
  lat.value = parseFloat(props.initlat);
  const intervalId = setInterval(() => {
    if (map.value) {
      handleLngLatChange(lng.value, lat.value);
      clearInterval(intervalId); // 清除定时器
    }
  }, 1000); // 每秒询问一次
}

watch(() => [lng.value, lat.value], ([lng, lat]) => {
  handleLngLatChange(lng, lat);
})

const handleMapClick = ({type, target, lnglat, containerPoint}) => {
  lng.value = lnglat.lng;
  lat.value = lnglat.lat;
}

const mapInit = (initMap) => {
  map.value = initMap;
}

const querySearchAsync = (queryString, cb) => {
  const searchService = new T.LocalSearch(map.value, {
    pageCapacity: 30,
    onSearchComplete: function (result) {
      const res = result.pois ? result.getPois().map((item) => {
        return {
          value: item.name,
          data: item
        }
      }) : [{
        value: result.area.name,
        data: result.area
      }];
      cb(res);
    }
  });
  searchService.search(queryString, 1);
}

const handleSelect = (item) => {
  const {data} = item;
  const lnglat = data.lonlat.split(',');

  lng.value = lnglat[0];
  lat.value = lnglat[1];
}
</script>

<template>
  <div class="box">
    <div class="mapDiv">
      <tdt-map @init="mapInit" :center="state.center" :zoom="state.zoom" @click="handleMapClick">
        <div class="search-input">
          <el-autocomplete
              v-model="search"
              placeholder="输入关键词搜索"
              :trigger-on-focus="false"
              clearable
              :fetch-suggestions="querySearchAsync"
              @select="handleSelect">
            <template #append>
              <el-button :icon="Search"/>
            </template>
          </el-autocomplete>
        </div>

      </tdt-map>
    </div>
    <div class="lnglat">
      <el-input v-model="lng" style="width: 240px" placeholder="">
        <template #prepend>经度</template>
      </el-input>
      <el-input v-model="lat" style="width: 240px" placeholder="">
        <template #prepend>纬度</template>
      </el-input>
    </div>
  </div>

</template>

<style lang="less" scoped>
.box {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mapDiv {
  position: relative;
  width: 500px;
  height: 400px
}

.lnglat {
  width: 500px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.search-input {
  z-index: 999;
  position: absolute;
  width: 220px;
  border-radius: 5px;
  right: 20px;
  top: 20px;

  box-shadow: 0px 0px 2.2px rgba(0, 0, 0, 0.02),
  0px 0px 5.3px rgba(0, 0, 0, 0.028),
  0px 0px 10px rgba(0, 0, 0, 0.035),
  0px 0px 17.9px rgba(0, 0, 0, 0.042),
  0px 0px 33.4px rgba(0, 0, 0, 0.05),
  0px 0px 80px rgba(0, 0, 0, 0.07);
}

</style>
